<template>
    <div class="page_article art_details">
        <div class="warp art_warp" v-if="$check_action('/article/list', 'get')">
            <div class="container">
                <div class="row row_art">
                    <div class="col-12 col-lg-9 col-md-12">
                        <div class="card">
                            <!-- 文章详情 -->
                            <div class="article_detail">
                                <div_article :obj="obj"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-3">
                          <!-- 热门文章推荐 -->
                          <div class="list_hot">
                              <div class="hot_title">
                                  热门文章推荐
                              </div>
                              <list_article_hot :list="list_hot"/>
                          </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="comments-wrap warp" v-if="$check_action('/comment/list', 'get')">
            <div class="container">
                <div class="row review">
                    <!-- 评论区 -->
                    <div class="col">
                        <bar_title class="mt" title="评论区"/>
                        <div class="comment_box">
                            <list_comment
                                    class="w-100"
                                    :list="list_comment"
                                    :obj="form_comment" 
									@reset="update_comment()"
                            />
                            <b-pagination-nav
                                    :base-url="$route.path"
                                    :number-of-pages="count_pages"
                                    :link-gen="link_gen"
                                    @change="change_page"
                                    first-number
                                    last-number
                            />
                        </div>

                        <!-- 发表评论 -->
                        <div class="form_editor">
                            <div class="fl ml-3" v-show="form_comment.reply_to_id">
                                对 <i>{{ respondent }}</i> <span>回复</span>
                            </div>
                            <div class="fr mr-3" v-show="form_comment.reply_to_id">
                                <b-button
                                        variant="outline-primary"
                                        size="sm"
                                        @click="form_comment.reply_to_id = 0"
                                ><span>重置回复人</span>
                                </b-button
                                >
                            </div>
                            <form_editor
                                    class="fn"
                                    :form="form_comment"
                                    @update_comment="update_comment"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from "@/mixins/page.js";
    import bar_title from "@/components/diy/bar_title.vue";
    import div_article from "@/components/diy/div_article.vue";
    import list_article_hot from "@/components/diy/list_article_hot.vue";
    import list_comment from "@/components/diy/list_comment.vue";
    import form_editor from "@/components/diy/form_editor.vue";

    export default {
        mixins: [mixin],
        components: {
            list_comment,
            div_article,
            list_article_hot,
            bar_title,
            form_editor,
        },
        data() {
            return {
                url_get_obj: "~/api/article/get_obj?",
                field: "article_id",
                obj: {},
                query: {
                    article_id: 0,
                },
                list_hot: [],
                list_comment: [],
                form_comment: {
                    source_table: "article",
                    source_field: "article_id",
                    source_id: 0,
                    reply_to_id: 0,
                },
                count_pages: 1, // 页面数
                seted_count_pages: true, // 是否设置过
            };
        },
        methods: {
            /**
             * 获取评论后
             * @param {Object} json 响应对象
             */
            get_obj_after(json) {
                this.form_comment.source_id = this.query.article_id;
            },
            /**
             * 获取热门文章
             */
            get_hot_article() {
                this.$get(
                    "~/api/article/get_list",
                    {
                        page: 1,
                        size: 10,
                        orderby: "hits desc",
                    },
                    (res) => {
                        if (res.result) {
                            this.list_hot = res.result.list;
                        }
                    }
                );
            },
            /**
             * 获取评论
             * @param { Object } obj 文章对象
             * @param { Number } page 分页数
             * @param { Number } size 评论显示条数
             */
            get_comment(obj,page = 1, size = 5) {
                this.$get(
                    "~/api/comment/get_list?",
                    {
                        source_table: "article",
                        source_field: "article_id",
                        source_id: obj.article_id,
                        page,
                        size,
                        reply_to_id: "0",
                        orderby: "create_time desc",
                    },
                    (json) => {
                        if (json.result) {
                            var list_comment = json.result.list;
                            list_comment.map((o) => {
                                o.list_reply = [];
                            });
                            this.add_reply(list_comment).then((list) => {
                                this.list_comment = list;
                            });
                            // 分页器
                            // if (this.seted_count_pages) {
                            //   this.seted_count_pages = false;
                            //   this.count_pages = Math.ceil(json.result.count / size);
                            // }
                            this.count_pages = Math.ceil(json.result.count / size) || 1
                        }
                    }
                );
            },

            /**
             * @param { Array } list 评论列表
             * 添加回复到评论列表
             */
            add_reply(list) {
                return new Promise((resolve) => {
                    for (let idx = 0; idx < list.length; idx++) {
                        const obj = list[idx];
                        this.$get(
                            "~/api/comment/get_list?",
                            {
                                source_table: "article",
                                source_field: "article_id",
                                source_id: obj.article_id,
                                orderby: "create_time desc",
                                reply_to_id: obj.comment_id,
                            },
                            (res) => {
                                if (res.result) {
                                    obj.list_reply = res.result.list;
                                }
                            }
                        );
                    }
                    resolve(list);
                });
            },

            /**
             * 更新评论
             */
            update_comment() {
                this.get_comment(this.obj);
            },
            /**
             * 分页器
             * @param { Number } page_num 分页数
             * @return { Object } 查询对象
             */
            link_gen(page_num) {
                return {
                    query: this.query,
                };
            },
            /**
             *加载下一页
             */
            change_page(page_num) {
                this.get_comment(this.obj, page_num);
                this.form_comment.reply_to_id = 0;
            },
            /**
             * 获取对象之后
             * @param {Object} json 结果对象
             */
            get_obj_after(json) {
              let obj = json.result.obj;
              this.add_hits(obj)
              this.get_comment(obj);
              this.form_comment.source_id = obj.article_id;
            },
            /**
             * 添加访问量
             */
            add_hits(obj) {
              this.$post('~/api/article/set?article_id=' + obj.article_id, {
                hits: parseInt(obj.hits) + 1
              }, res => {
                obj.hits =parseInt(obj.hits)+ 1
                console.log(res);
              })
            }
        },
        computed: {
            respondent() {
                var reply_to_id = this.form_comment.reply_to_id;
                var respondent = "";
                this.list_comment.map((o) => {
                    if (o.comment_id === reply_to_id) {
                        respondent = o.nickname;
                    }
                });
                return respondent;
            },
        },
        mounted() {
            this.get_hot_article();
            // setTimeout(() => {
            //     this.get_comment();
            // }, 1000);
        },
    };
</script>

<style scoped>

    .card {
        border-radius: 0.5rem;
    }

    .list_hot {
      color: white;
      background-color: var(--color_primary);
      margin: 0.5rem;
      padding: 1rem;
      border-radius: 0.5rem;
    }

    .hot_title {
      height: 4rem;
      font-size: 1.2rem;
      font-weight: bold;
      align-items: center;
      justify-content: center;
      display: flex;
      margin-bottom: 1rem;
    }

    .form_editor {
        padding: 10px;
    }

    .comment_box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
